<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">

        function UpladFile() {
            var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
            var FileController = "http://localhost:8080/Util/user/upload";                    // 接收上传文件的后台地址 

            // FormData 对象
            //var form = new FormData($( "#uploadForm" )[0]);
            var form = new FormData(); // FormData 对象
            form.append("file", fileObj);

            // XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.open("post", FileController, true);
            xhr.onload = function () {
               // alert("上传完成!");
            };

            xhr.upload.addEventListener("progress", progressFunction, false);
            var result=xhr.send(form);
            console.log(result);
        }

        function progressFunction(evt) {
            var progressBar = document.getElementById("progressBar");
            var percentageDiv = document.getElementById("percentage");
            if (evt.lengthComputable) {
                progressBar.max = evt.total;
                progressBar.value = evt.loaded;
                percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
                if(evt.loaded==evt.total){
                    alert("上传完成100%");
                }
                //可使用bootstrap进度条
            }
        }  

    </script>
    
    <br />
    <br />
    <br />
    <br />

    <progress id="progressBar" value="0" max="100"></progress>
    <span id="percentage"></span>

    <br />
    <br />
    <br />
    <br />

<form id= "uploadForm">

    <input type="file" id="file" name="myfile" />
    <input type="button" onclick="UpladFile()" value="上传" />

</form>
</body>
</html>